<template>
  <div class="center-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>居家生活</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card myCard">
      <div style="width: 100%">
        <div class="categoryDiv">
          <span style="color: #cc8d40">分类:&nbsp;&nbsp;&nbsp;&nbsp;</span
          ><span v-for="c in res" :key="c.id">
            <a :href="`#${c.category1Id}`" style="color: black">{{c.categoryName }}</a>
          </span>
        </div>
        <div class="categoryDiv">
          <span style="color: #cc8d40">配送地区:&nbsp;&nbsp;&nbsp;&nbsp;</span
          ><span v-for="p in province" :key="p.id">{{ p.provinceName }}</span>
        </div>
      </div>
      <div v-for="c in res" :key="c.id">
        <h2 style="text-align: center; margin: 23px 0;font-size: 20px;display:inline-block;width: 100%;height: 40px" :id="c.category1Id">
          {{ c.categoryName }}
        </h2>
        <div class="center-div">
          <div class="small-box" v-for="good in goods" :key="good.id" @click="textTo(good.id)">
            <img :src="good.bigImage[0].img" alt="" />
            <h2 class="center-h2">{{ good.title }}</h2>
            <p>¥{{ good.price }}</p>
            <div class="center-line"></div>
            <div class="center-h2">{{ good.intro }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCategory, getProvince,reqGetDetailList } from "@/api";

export default {
  name: "XCategory",
  data() {
    return {
      res: "",
      province: "",
      goods: "",
    };
  },
  methods: {
    // 获取分页列表
    async getCategoryList() {
      this.res = await getCategory();
    },
    // 获取省份
    async getProvince() {
      this.province = await getProvince();
    },
    // 获取商品
    async categoryGoods(){
      this.goods = await reqGetDetailList();
    },
    // 携带id跳转
    textTo(id){
      this.$router.push({
        name:'detail',
        params:{id:id}
      })
      console.log(id,'id')
    }
  },
  mounted() {
    this.getCategoryList();
    this.getProvince();
    this.categoryGoods();
  },
};
</script>

<style scoped>
.center-card {
  width: 1160px;
  margin: 20px auto;
}

.myCard {
  margin-top: 10px;
  padding: 22px;
}
.categoryDiv {
  border-bottom: 1px dashed #808080;
  padding: 20px 0;
}

.center-div > div {
  float: left;
  /*background-color: pink;*/
  width: 258px;
  height: 370px;
  margin-right: 10px;
}

.center-div div img {
  width: 100%;
}

.center-h2 {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
}

.center-div p {
  text-align: center;
  margin-top: 4px;
  font-size: 10px;
  color: #d4282d;
}
.center-line {
  border-bottom: 1px grey dashed;
  margin: 10px auto;
  width: 120px;
}

.small-box:hover {
  background-color: #f4f0ea;
  box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.bottom-p {
  font-size: 16px;
}
</style>
